<template>
  <!--列表 横向卡片 组件-->
  <div class="listItem" @click="handleShow" v-if="foodItem">
    <!--<RouterLink to class="linkBox">-->
    <div class="itemImg">
      <img :src="foodItem.menu_image" alt="sds" />
    </div>
    <div class="itemTiter">
      <p>
        菜名:<strong>{{ foodItem.menu_name }} </strong>
      </p>
      <p>材料:{{ foodItem.menu_materials }}</p>
      <span>
        <strong>{{ foodItem.menu_price }}</strong> $
      </span>
      <!--计数-->
      <div class="Count" v-if="isDietRecords && isTime">
        <Count
          :menu_type="foodItem.menu_type"
          :order_count="foodItem.order_count"
          :menu_id="foodItem.menu_id"
        />
      </div>
      <!--时间-->
      <div class="time" v-if="!isDietRecords">
        {{ foodItem.menu_time.split("T")[0] }}
      </div>
    </div>
    <!--</RouterLink>-->
    <!--弹出框-->
    <teleport to="#app">
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
          <Wrapper
            @handleCancel="handleCancel"
            :foodItem="foodItem"
            :isTime="isTime"
            :order_count="foodItem.order_count"
          />
        </div>
      </van-overlay>
    </teleport>
  </div>
</template>

<script>
import { onMounted, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import Wrapper from "./Wrapper";
import Count from "./Count";

export default {
  name: "ListItem",
  props: ["foodItem", "isSPay"],
  components: { Count, Wrapper },
  setup(props) {
    const route = useRoute();
    //时间辨别点
    const isTime = ref(true);
    const time = new Date().getHours();
    //辨别菜品类型是否在就餐时间范围
    watchEffect(() => {
      if (props.foodItem.menu_type == "早") {
        isTime.value = 6 <= time && time <= 7 ? true : false;
      } else if (props.foodItem.menu_type == "中") {
        isTime.value = 11 <= time && time <= 13 ? true : false;
      } else if (props.foodItem.menu_type == "晚") {
        isTime.value = 18 <= time && time <= 19 ? true : false;
        // isTime.value = true;
      }
    });
    const isDietRecords = ref(true);
    //辨别菜谱记录页面
    onMounted(() => {
      if (route.path == "/dietRecords") return (isDietRecords.value = false);
      isDietRecords.value = true;
    });
    const show = ref(false);
    //弹出框
    const handleShow = () => {
      show.value = true;
    };
    //取消弹出框
    const handleCancel = () => {
      show.value = false;
    };
    return { show, handleShow, isDietRecords, isTime, handleCancel };
  },
};
</script>

<style scoped lang="less">
.listItem {
  width: 100%;
  padding: 0 0.2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  .itemImg {
    width: 6rem;
    height: 6rem;
    text-align: center;
    overflow: hidden;
    img {
      height: 100%;
      max-width: 100%;
    }
  }
  .itemTiter {
    position: relative;
    flex: auto;
    height: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 0.5rem;
    box-sizing: border-box;
    .Count {
      position: absolute;
      right: 1rem;
      bottom: 0.1rem;
    }
    .time {
      position: absolute;
      right: 1rem;
      bottom: 0rem;
      color: #646566;
      font-size: 1rem;
    }
    p {
      width: 100%;
      margin: 0;
      color: #5f5f5f;
      font-size: 0.9rem;
      padding: 0;
      box-sizing: border-box;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      strong {
        color: #e29a51;
        font-size: 0.95rem;
        white-space: nowrap;
      }
    }
    span strong {
      color: #ff6034;
      font-size: 1.3rem;
    }
  }
}
.wrapper {
  width: 90%;
  margin: auto;
  padding: 1rem 0.8rem;
  border-radius: 0.6rem;
  box-sizing: border-box;
  transform: translate(0, 50%);
  background-color: #fff;
}
</style>
